<template>
  <div>
    <div class="min-h-300px" v-loading="loading" v-if="banner_list[0] != null">
      <el-carousel height="auto" autoplay>
        <el-carousel-item
          v-for="item in banner_list"
          :key="item.id"
          class="w-100% h-300px"
        >
          <div @click="go(item.url)">
            <img
              ref="bannerImg"
              class="w-100% h-300px"
              :src="item.img"
              alt=""
            />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <ContentHeader :headerTitle="headerTitle" v-if="is_content">
      <p class="text-20px line-height-26px mb-10px indent-1 px-10px">
        {{ content_title }}
      </p>
      <p
        class="mb-30px text-18px line-height-26px indent-1 px-10px text-justify"
      >
        {{ content }}
      </p>
    </ContentHeader>
    <slot name="nav" />
    <slot name="operation" />
    <slot name="quiz" />
    <slot name="finance" />
    <ContentHeader :headerTitle="headerTitle" class="relative" v-if="is_news">
      <div class="flex flex-justify-between">
        <div>
          <div
            v-if="news_list_l.length !== 0"
            class="flex flex-items-center flex-justify-between mt--30px mb-10px text-#333 text-16px"
          >
            <div class="text-18px font-600">{{ labels[type_l] }}</div>
            <div
              class="ml-20px hover-text-#1976d2 cursor-pointer"
              @click="more(type_l)"
            >
              更多>>
            </div>
          </div>
          <div :span="12" v-for="item in news_list_l" :key="item.src">
            <ul
              class="flex flex-items-center flex-content-between mb-10px cursor-pointer"
              @click="go(item.id)"
            >
              <div
                class="w-5px h-5px rd-3px bg-#000 line-height-24px mr-5px"
              ></div>
              <p
                class="w-450px text-truncate text-#333 text-18px hover-text-#1976d2"
              >
                {{ item.title }}
              </p>
              <p class="ml-30px text-#999 text-16px">{{ item.ctime }}</p>
            </ul>
          </div>
        </div>
        <div>
          <div
            v-if="news_list_r.length !== 0"
            @click="more(type_r)"
            class="flex flex-items-center flex-justify-between right-10px mt--30px mb-10px text-#333 text-16px"
          >
            <div class="text-18px font-600">{{ labels[type_r] }}</div>
            <div class="ml-20px hover-text-#1976d2 cursor-pointer">更多>></div>
          </div>
          <div :span="12" v-for="item in news_list_r" :key="item.src">
            <ul
              class="flex flex-items-center flex-content-between mb-10px cursor-pointer"
              @click="go(item.id)"
            >
              <div
                class="w-5px h-5px rd-3px bg-#000 line-height-24px mr-5px"
              ></div>
              <p
                class="w-450px text-truncate text-#333 text-18px hover-text-#1976d2"
              >
                {{ item.title }}
              </p>
              <p class="ml-30px text-#999 text-16px">{{ item.ctime }}</p>
            </ul>
          </div>
        </div>
      </div>
    </ContentHeader>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

import { useRouter } from "vue-router";
import { getAssetsHomeFile } from "@/utils/index";
// import { front_banner_list } from "@/api/index";

const labels = {
  news: "信息资讯",
  annoucement: "政务公告",
  policy: "政策法规",
  guide: "服务指南",
  train: "培训信息",
  case: "案例分享",
};

const props = defineProps({
  content_title: {
    type: String,
    default: "",
  },
  type_l: {
    type: String,
    default: "",
  },
  type_r: {
    type: String,
    default: "",
  },
  is_banner: {
    type: Boolean,
    default: true,
  },
  is_content: {
    type: Boolean,
    default: true,
  },
  is_news: {
    type: Boolean,
    default: true,
  },
  src_index: {
    type: Number,
    default: 0,
  },
  headerTitle: {
    type: String,
    default: "",
  },
  content: {
    type: String,
    default: "",
  },
  news_list_l: {
    type: Array,
    default: [],
  },
  news_list_r: {
    type: Array,
    default: [],
  },
});

const $router = useRouter();
const list = ["data.jpg"];
const banner_list = ref([]);
const loading = ref(true);

// const get_banner_list = async () => {
//   const { data } = await front_banner_list();
//   banner_list.value = data;
//   loading.value = false;
// };
// get_banner_list();

const handle_src = (src) => {
  return `~@/assets/images/${list[src]}` || "";
};

const go = (id) => {
  $router.push({ path: "/notice/detail", query: { id } });
};
const more = (type) => {
  $router.push({ path: "/notice", query: { type } });
};
</script>

<style scoped></style>
